<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>无标题文档</title>
    <link th:href="@{/css/style.css}" rel="stylesheet" type="text/css"/>
    <th:block th:include="public::common-script"></th:block>
    <script th:src="@{/layer/layer.js}" type="text/javascript"></script>
    <style>
        [name=roles]{
            position: relative;
            top: 2px;
        }
    </style>
</head>

<body>

<div class="place">
    <span>位置：</span>
    <ul class="placeul">
        <li><a href="#">行政管理</a></li>
        <li><a href="#">添加用户</a></li>
    </ul>
</div>

<div class="formbody">

    <div class="formtitle"><span>基本信息</span></div>

    <ul class="forminfo">
        <li><label>姓名</label><input name="username" onkeyup="checkName(this.value)" autocomplete="off" type="text"
                                    class="dfinput"/>
            <i id="nameText">真实姓名</i>
        </li>
        <li>
            <label>手机号码</label><input name="phone" onkeyup="userExists(this.value)" autocomplete="off" type="text"
                                      class="dfinput"/>
            <i id="phoneText">12位手机号（将作为唯一登录名称）</i>
        </li>

        <li><label>角色</label>
            <div id="roles">

            </div>
        </li>
        <li><div style="height: 10px;"></div></li>
        <li><label>&nbsp;</label><input name="" type="button" onclick="save()" class="btn" value="确认保存"/></li>
    </ul>


</div>

<script type="text/javascript" th:inline="javascript">
    function checkName(name) {
        if (name == "") {
            $("#nameText").css("color", "#7f7f7f").html("真实姓名")
            return false;
        }
        if (!/^[\u4e00-\u9fa5]{2,4}$/.test(name)) {
            $("#nameText").css("color", "red").html("× 请输入该教师的真实姓名！")
            return false;
        } else {
            $("#nameText").css("color", "green").html("√")
            return true;
        }
    }

    function save() {
        var name = $("[name=username]").val()
        var loginName = $("[name=phone]").val()

        var roleIds = [];
        $("input[name='roles']:checked").each(function () {
            roleIds.push($(this).val());
        })
        if (!checkName(name)) {
            layer.msg('请正确填写表单数据', {icon: 5});
            return false;
        }
        if (loginName == ""||loginName.length>15) {
            layer.msg('手机号码长度异常', {icon: 5});
            return false;
        }
        $.get("/api/addUser", {
            name: name,
            loginName: loginName,
            roleIds: roleIds
        }, function (resp) {
            if (resp.code == 200) {
                layer.msg('添加成功', {icon: 1});
                setTimeout(function () {
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    parent.layer.close(index); //再执行关闭
                    parent.location.reload();
                }, 3000)
            } else {
                layer.msg('添加失败:' + resp.message, {icon: 2});
            }
        })
    }

    function userExists(val) {
        if (val == "") {
            $("#phoneText").css("color", "#7f7f7f").html("12位手机号（将作为唯一登录名称）")
            return false;
        }
        if (isNaN(val)) {
            $("#phoneText").css("color", "red").html("手机号码非法，出现了非数字符！")
            return false;
        }
        if (val.length != 11) {
            $("#phoneText").css("color", "red").html("× 手机号码有误,你已输入" + val.length + "位。")
            return false;
        }
        $.get("/api/userExists", {loginName: val}, function (resp) {
            if (resp.data) {
                $("#phoneText").css("color", "red").html("× 该用户已经注册！")
            } else {
                $("#phoneText").css("color", "green").html("√ 该账号可以注册")
            }
        })
    }

    $.get("/api/roleList", function (resp) {
        var ht = "";
        for (var i = 0; i < resp.data.length; i++) {
            ht += '<input type="checkbox" name="roles" value="' + resp.data[i].id + '"/>' + resp.data[i].desc;
        }
        var w = $("<div></div>")
            .css({position: "relative", top: "10px"})
            .html(ht)
        $("#roles").html(w);
    })
</script>
</body>

</html>
